<template>
  <div>
    <upload-file
      :limit="1"
      :maxSize="200"
      descText="支持格式：mp4、ogg、webm、avi、flv，单个文件不能超过200MB"
      :value="value"
      @input="onInput"
    />
    <div class="video-wrapper" v-if="value">
      <i class="close el-icon el-icon-close" @click="clear"></i>
      <video :src="value" width="100%" controls></video>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-video",
  props: {
    value: {
      type: [Number, String],
      default: () => undefined
    }
  },
  methods: {
    onInput(val) {
      this.$emit("input", val);
    },
    clear() {
      this.$emit("input", "");
    }
  }
};
</script>
<style lang="scss" scoped>
.video-wrapper {
  position: relative;
  .close {
    position: absolute;
    z-index: 99;
    font-size: 24px;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }
}
</style>
